<template>
  <div class="nutrition">
    <h1>营养分析</h1>
    <div class="mid" v-if="list.length != 0">
      <canvas width="230" height="100" ref="canvas"></canvas>
      <div class="total">
        <h3>
          {{ total }}
        </h3>
        <h5>千卡</h5>
      </div>
    </div>
    <div class="tips">
      <h2><span></span>{{ text }}</h2>
    </div>
  </div>
</template>

<script>
export default {
  props: ["list", "text"],
  data: function () {
    return {
      total: 0,
    };
  },
  created: function () {
    this.list.forEach((ele) => {
      this.total += ele.calorie;
    });
  },
  mounted: function () {
    if (this.list.length != 0) {
      let ctx = this.$refs.canvas.getContext("2d");
      ctx.lineWidth = 25;
      let farc = -(Math.PI / 180) * 90;
      let height = 20;

      for (let n = 0; n < this.list.length; n++) {
        ctx.beginPath();
        ctx.arc(
          50,
          50,
          30,
          farc,
          (Math.PI / 180) * 360 * (this.list[n].calorie / this.total) + farc
        );
        farc =
          (Math.PI / 180) * 360 * (this.list[n].calorie / this.total) + farc;
        ctx.strokeStyle = this.list[n].pie_chart_color;
        ctx.stroke();
        ctx.closePath();
        ctx.beginPath();
        ctx.arc(120, height, 5, 0, Math.PI * 2);
        ctx.fillStyle = this.list[n].pie_chart_color;
        ctx.fill();
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = "#666";
        ctx.font = '10px "微软雅黑"';
        ctx.fillText(this.list[n].nutrient, 130, height + 3);
        ctx.textBaseline = "center";
        ctx.closePath();

        ctx.beginPath();
        ctx.fillStyle = "#000";
        ctx.measureText(50);
        ctx.font = '10px "微软雅黑" bolder';
        ctx.fillText(this.list[n].amount, 190, height + 3);
        ctx.textBaseline = "center";
        ctx.closePath();
        height += 30;
      }
    }
  },
};
</script>

<style lang="less" scoped>
.nutrition {
  padding: 10px 15px 20px 15px;
  h1 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .mid {
    display: flex;
    align-items: center;
    .total {
      flex: 1;
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-left: 2px solid #f1f1f1;
      h1 {
        font-weight: 9000;
      }
      h5 {
        color: #999;
      }
    }
  }
  .tips {
    h2 {
      font-size: 13px;
      font-weight: bolder;
      display: flex;
      align-items: center;
      // &::before{
      //   content: "";
      //   display: inline-block;
      //   width: 12px;
      //   height: 12px;
      //   background-image: url("../assets/dtp.png");
      //   background-size: 100%;
      //   background-position: center;
      // }
      span {
        display: inline-block;
        margin-right: 3px;
        width: 12px;
        height: 12px;
        background-image: url("../assets/dtp.png");
        background-size: 100%;
        background-position: center;
      }
    }
  }
}
</style>